<template>
<div style="width: 100%;overflow-x: auto;overflow-y: hidden">
  <div style="min-width: 520px" class="dispatch-div" v-for="(item, index) in orderDataArr" :key="index" v-show="(!isMore && index < 4) || isMore">
    <el-form ref="searchForm">
      <el-row :gutter="10">
        <el-col :span="1">
          <el-checkbox :disabled="item.isDepart" :indeterminate="item.checkOrderIndeterminate" v-model="item.checkOrder" @change="checkAllServiceChange(item)"></el-checkbox>
        </el-col>
        <el-col :span="23">
          <el-row :gutter="10">
            <el-col :span="8">
              <!--TODO:  是否有安装或者配送（isPSAZ）, 订单是否已经出发（isDepart）-->
              <!--<el-tooltip content="有安装" placement="top" effect="light" v-if="installDispatchIndex && item.isPSAZ">-->
              <!--<a href="javascript:;" class="blue-color" @click="orderDetail(item)">{{item.orderNo}}<i class="el-icon-info"></i></a>-->
              <!--</el-tooltip>-->
              <!--<el-tooltip content="有配送" placement="top" effect="light" v-if="distributionDispatchIndex && item.isPSAZ">-->
              <!--<a href="javascript:;" class="blue-color" @click="orderDetail(item)">{{item.orderNo}}<i class="el-icon-info"></i></a>-->
              <!--</el-tooltip>-->
              <a href="javascript:;" class="blue-color" @click="orderDetail(item)" v-if="!item.isDepart">{{item.orderNo}}</a>
              <el-tooltip content="已出发" placement="top" effect="light" v-if="item.isDepart">
                <a href="javascript:;" class="blue-color" @click="orderDetail(item)" style="color: #E30000">{{item.orderNo}}<i class="el-icon-info"></i></a>
              </el-tooltip>
            </el-col>
            <el-col :span="5">总包件：{{item.totalPackage}}</el-col>
            <el-col :span="5">总体积：{{item.totalVolume}} m³</el-col>
            <el-col :span="6">总重量：{{item.totalWeight}} kg</el-col>
            <el-col :span="24">
              <el-form-item label="服务类型：" class="dispatch-item-service">
                <el-checkbox-group v-model="item.checkedServices" @change="checkedSingleServicesChange(item)">
                  <el-checkbox :disabled="item.isDepart" v-for="(p, pIndex) in item.serviceOrderLists"
                               :label="p.serviceOrderId"
                               :key="pIndex"
                  >{{p.serviceTypeCode | filterDataBaseDictionary}}({{p.timeInterval}}) </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="客户信息：" class="dispatch-item-service">
                <span>{{item.consigneName}} {{item.consignePhone}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="dispatchStage">
              <el-form-item label="订单状态：" class="dispatch-item-service">
                <span>{{item.serviceState | filterDataBaseDictionary}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="客户地址：" class="dispatch-item-service">
                <span>{{item.consigneProvince}} {{item.consigneCity}} {{item.consigneDistrict}} {{item.consigneAddress}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</div>
</template>

<script>
import {filterDataBaseDictionary, decimalNumFilter} from '@/filters'
export default {
  name: 'OrderComponent',
  props: {
    orderDataArr: {
      type: Array,
      required: true
    },
    isMore: {
      type: Boolean,
      default: true
    },
    distributionDispatchIndex: {
      type: Boolean,
      default: false
    },
    installDispatchIndex: {
      type: Boolean,
      default: false
    },
    loadingDispatchIndex: {
      type: Boolean,
      default: false
    },
    dispatchStage: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    filterDataBaseDictionary
  },
  data() {
    return {}
  },
  computed: {},
  methods: {
    checkedSingleServicesChange(val) { // 选择服务单
      // console.log('checkedServicesChange', val)
      let checkedCount = val.checkedServices.length
      val.checkOrder = checkedCount === val.serviceOrderLists.length
      val.checkOrderIndeterminate = checkedCount > 0 && checkedCount < val.serviceOrderLists.length
      this.checkAllServiceChange(val)
      // if (!checkedCount || val.checkOrder) {
      //   this.checkAllServiceChange(val)
      // }
    },
    checkAllServiceChange(val) { // 选择订单
      console.log('checkAllServiceChange', val)
      // TODO: 分为三种状态（订单下的服务单全选,半选，取消选择）
      if (val.checkOrder) {
        val.checkedServices = []
        val.serviceOrderLists.forEach(item => {
          val.checkedServices.push(item.serviceOrderId)
        })
        val.checkOrderIndeterminate = false
      } else if (!val.checkOrder && !val.checkOrderIndeterminate) {
        val.checkedServices = []
      }
      // 勾选的多单数据
      let arr = []
      let checkedVolume = 0
      this.orderDataArr.forEach(item => {
        if (item.checkOrder) {
          checkedVolume += item.totalVolume
          arr.push(item)
        }
      })
      let checkedOrderCount = arr.length
      let checkAll = checkedOrderCount === this.orderDataArr.length
      let checkAllIndeterminate = checkedOrderCount > 0 && checkedOrderCount < this.orderDataArr.length
      let data = {}
      data.checkedOrderCount = checkedOrderCount
      data.checkAll = checkAll
      data.checkAllIndeterminate = checkAllIndeterminate
      data.checkedVolume = decimalNumFilter(checkedVolume)
      this.$emit('input', data)
    },
    getCheckData() {
      let _checkedArr = []
      this.orderDataArr.forEach(item => {
        _checkedArr = _checkedArr.concat(item.checkedServices)
      })
      return _checkedArr
    },
    orderDetail(data) {
      if (this.distributionDispatchIndex) {
        this.$router.push({path: '/ss-oms/dispatch/distribution/order-detail/' + data.orderId})
      } else if (this.installDispatchIndex) {
        this.$router.push({path: '/ss-oms/dispatch/install/order-detail/' + data.orderId})
      } else if (this.loadingDispatchIndex) {
        this.$router.push({path: '/ss-oms/dispatch/loading/order-detail/' + data.orderId})
      }
    }
  }
}
</script>
<style lang="scss">
  .dispatch-item-service {
    margin-bottom: 0px;
    .el-form-item__label{
      color: #303133;
      line-height: 22px;
      font-weight: 500;
    }
    .el-form-item__content {
      line-height: 22px;
    }
  }
</style>
